import { ConfigConditions, createTheme, defineProperties } from '@box-extractor/vanilla-wind'

// https://github.com/chakra-ui/chakra-ui/blob/05b19899b02e17b4ee16045c9e5065fa835f0159/packages/components/theme/src/foundations/colors.ts#L1-L240
export const colorPalette = {
  transparent: 'transparent',
  current: 'currentColor',
  black: '#000000',
  white: '#FFFFFF',

  whiteAlpha: {
    50: 'rgba(255, 255, 255, 0.04)',
    100: 'rgba(255, 255, 255, 0.06)',
    200: 'rgba(255, 255, 255, 0.08)',
    300: 'rgba(255, 255, 255, 0.16)',
    400: 'rgba(255, 255, 255, 0.24)',
    500: 'rgba(255, 255, 255, 0.36)',
    600: 'rgba(255, 255, 255, 0.48)',
    700: 'rgba(255, 255, 255, 0.64)',
    800: 'rgba(255, 255, 255, 0.80)',
    900: 'rgba(255, 255, 255, 0.92)',
  },

  blackAlpha: {
    50: 'rgba(0, 0, 0, 0.04)',
    100: 'rgba(0, 0, 0, 0.06)',
    200: 'rgba(0, 0, 0, 0.08)',
    300: 'rgba(0, 0, 0, 0.16)',
    400: 'rgba(0, 0, 0, 0.24)',
    500: 'rgba(0, 0, 0, 0.36)',
    600: 'rgba(0, 0, 0, 0.48)',
    700: 'rgba(0, 0, 0, 0.64)',
    800: 'rgba(0, 0, 0, 0.80)',
    900: 'rgba(0, 0, 0, 0.92)',
  },

  gray: {
    50: '#F7FAFC',
    100: '#EDF2F7',
    200: '#E2E8F0',
    300: '#CBD5E0',
    400: '#A0AEC0',
    500: '#718096',
    600: '#4A5568',
    700: '#2D3748',
    800: '#1A202C',
    900: '#171923',
  },

  red: {
    50: '#FFF5F5',
    100: '#FED7D7',
    200: '#FEB2B2',
    300: '#FC8181',
    400: '#F56565',
    500: '#E53E3E',
    600: '#C53030',
    700: '#9B2C2C',
    800: '#822727',
    900: '#63171B',
  },

  orange: {
    50: '#FFFAF0',
    100: '#FEEBC8',
    200: '#FBD38D',
    300: '#F6AD55',
    400: '#ED8936',
    500: '#DD6B20',
    600: '#C05621',
    700: '#9C4221',
    800: '#7B341E',
    900: '#652B19',
  },

  yellow: {
    50: '#FFFFF0',
    100: '#FEFCBF',
    200: '#FAF089',
    300: '#F6E05E',
    400: '#ECC94B',
    500: '#D69E2E',
    600: '#B7791F',
    700: '#975A16',
    800: '#744210',
    900: '#5F370E',
  },

  green: {
    50: '#F0FFF4',
    100: '#C6F6D5',
    200: '#9AE6B4',
    300: '#68D391',
    400: '#48BB78',
    500: '#38A169',
    600: '#2F855A',
    700: '#276749',
    800: '#22543D',
    900: '#1C4532',
  },

  teal: {
    50: '#E6FFFA',
    100: '#B2F5EA',
    200: '#81E6D9',
    300: '#4FD1C5',
    400: '#38B2AC',
    500: '#319795',
    600: '#2C7A7B',
    700: '#285E61',
    800: '#234E52',
    900: '#1D4044',
  },

  blue: {
    50: '#ebf8ff',
    100: '#bee3f8',
    200: '#90cdf4',
    300: '#63b3ed',
    400: '#4299e1',
    500: '#3182ce',
    600: '#2b6cb0',
    700: '#2c5282',
    800: '#2a4365',
    900: '#1A365D',
  },

  cyan: {
    50: '#EDFDFD',
    100: '#C4F1F9',
    200: '#9DECF9',
    300: '#76E4F7',
    400: '#0BC5EA',
    500: '#00B5D8',
    600: '#00A3C4',
    700: '#0987A0',
    800: '#086F83',
    900: '#065666',
  },

  purple: {
    50: '#FAF5FF',
    100: '#E9D8FD',
    200: '#D6BCFA',
    300: '#B794F4',
    400: '#9F7AEA',
    500: '#805AD5',
    600: '#6B46C1',
    700: '#553C9A',
    800: '#44337A',
    900: '#322659',
  },

  pink: {
    50: '#FFF5F7',
    100: '#FED7E2',
    200: '#FBB6CE',
    300: '#F687B3',
    400: '#ED64A6',
    500: '#D53F8C',
    600: '#B83280',
    700: '#97266D',
    800: '#702459',
    900: '#521B41',
  },

  linkedin: {
    50: '#E8F4F9',
    100: '#CFEDFB',
    200: '#9BDAF3',
    300: '#68C7EC',
    400: '#34B3E4',
    500: '#00A0DC',
    600: '#008CC9',
    700: '#0077B5',
    800: '#005E93',
    900: '#004471',
  },

  facebook: {
    50: '#E8F4F9',
    100: '#D9DEE9',
    200: '#B7C2DA',
    300: '#6482C0',
    400: '#4267B2',
    500: '#385898',
    600: '#314E89',
    700: '#29487D',
    800: '#223B67',
    900: '#1E355B',
  },

  messenger: {
    50: '#D0E6FF',
    100: '#B9DAFF',
    200: '#A2CDFF',
    300: '#7AB8FF',
    400: '#2E90FF',
    500: '#0078FF',
    600: '#0063D1',
    700: '#0052AC',
    800: '#003C7E',
    900: '#002C5C',
  },

  whatsapp: {
    50: '#dffeec',
    100: '#b9f5d0',
    200: '#90edb3',
    300: '#65e495',
    400: '#3cdd78',
    500: '#22c35e',
    600: '#179848',
    700: '#0c6c33',
    800: '#01421c',
    900: '#001803',
  },

  twitter: {
    50: '#E5F4FD',
    100: '#C8E9FB',
    200: '#A8DCFA',
    300: '#83CDF7',
    400: '#57BBF5',
    500: '#1DA1F2',
    600: '#1A94DA',
    700: '#1681BF',
    800: '#136B9E',
    900: '#0D4D71',
  },

  telegram: {
    50: '#E3F2F9',
    100: '#C5E4F3',
    200: '#A2D4EC',
    300: '#7AC1E4',
    400: '#47A9DA',
    500: '#0088CC',
    600: '#007AB8',
    700: '#006BA1',
    800: '#005885',
    900: '#003F5E',
  },
} as const

export const flatColors = {
  transparent: 'transparent !important',
  current: 'currentColor !important',
  black: '#000000 !important',
  white: '#FFFFFF !important',
  'whiteAlpha.50': 'rgba(255, 255, 255, 0.04) !important',
  'whiteAlpha.100': 'rgba(255, 255, 255, 0.06) !important',
  'whiteAlpha.200': 'rgba(255, 255, 255, 0.08) !important',
  'whiteAlpha.300': 'rgba(255, 255, 255, 0.16) !important',
  'whiteAlpha.400': 'rgba(255, 255, 255, 0.24) !important',
  'whiteAlpha.500': 'rgba(255, 255, 255, 0.36) !important',
  'whiteAlpha.600': 'rgba(255, 255, 255, 0.48) !important',
  'whiteAlpha.700': 'rgba(255, 255, 255, 0.64) !important',
  'whiteAlpha.800': 'rgba(255, 255, 255, 0.80) !important',
  'whiteAlpha.900': 'rgba(255, 255, 255, 0.92) !important',
  'blackAlpha.50': 'rgba(0, 0, 0, 0.04) !important',
  'blackAlpha.100': 'rgba(0, 0, 0, 0.06) !important',
  'blackAlpha.200': 'rgba(0, 0, 0, 0.08) !important',
  'blackAlpha.300': 'rgba(0, 0, 0, 0.16) !important',
  'blackAlpha.400': 'rgba(0, 0, 0, 0.24) !important',
  'blackAlpha.500': 'rgba(0, 0, 0, 0.36) !important',
  'blackAlpha.600': 'rgba(0, 0, 0, 0.48) !important',
  'blackAlpha.700': 'rgba(0, 0, 0, 0.64) !important',
  'blackAlpha.800': 'rgba(0, 0, 0, 0.80) !important',
  'blackAlpha.900': 'rgba(0, 0, 0, 0.92) !important',
  'gray.50': '#F7FAFC !important',
  'gray.100': '#EDF2F7 !important',
  'gray.200': '#E2E8F0 !important',
  'gray.300': '#CBD5E0 !important',
  'gray.400': '#A0AEC0 !important',
  'gray.500': '#718096 !important',
  'gray.600': '#4A5568 !important',
  'gray.700': '#2D3748 !important',
  'gray.800': '#1A202C !important',
  'gray.900': '#171923 !important',
  'red.50': '#FFF5F5 !important',
  'red.100': '#FED7D7 !important',
  'red.200': '#FEB2B2 !important',
  'red.300': '#FC8181 !important',
  'red.400': '#F56565 !important',
  'red.500': '#E53E3E !important',
  'red.600': '#C53030 !important',
  'red.700': '#9B2C2C !important',
  'red.800': '#822727 !important',
  'red.900': '#63171B !important',
  'orange.50': '#FFFAF0 !important',
  'orange.100': '#FEEBC8 !important',
  'orange.200': '#FBD38D !important',
  'orange.300': '#F6AD55 !important',
  'orange.400': '#ED8936 !important',
  'orange.500': '#DD6B20 !important',
  'orange.600': '#C05621 !important',
  'orange.700': '#9C4221 !important',
  'orange.800': '#7B341E !important',
  'orange.900': '#652B19 !important',
  'yellow.50': '#FFFFF0 !important',
  'yellow.100': '#FEFCBF !important',
  'yellow.200': '#FAF089 !important',
  'yellow.300': '#F6E05E !important',
  'yellow.400': '#ECC94B !important',
  'yellow.500': '#D69E2E !important',
  'yellow.600': '#B7791F !important',
  'yellow.700': '#975A16 !important',
  'yellow.800': '#744210 !important',
  'yellow.900': '#5F370E !important',
  'green.50': '#F0FFF4 !important',
  'green.100': '#C6F6D5 !important',
  'green.200': '#9AE6B4 !important',
  'green.300': '#68D391 !important',
  'green.400': '#48BB78 !important',
  'green.500': '#38A169 !important',
  'green.600': '#2F855A !important',
  'green.700': '#276749 !important',
  'green.800': '#22543D !important',
  'green.900': '#1C4532 !important',
  'teal.50': '#E6FFFA !important',
  'teal.100': '#B2F5EA !important',
  'teal.200': '#81E6D9 !important',
  'teal.300': '#4FD1C5 !important',
  'teal.400': '#38B2AC !important',
  'teal.500': '#319795 !important',
  'teal.600': '#2C7A7B !important',
  'teal.700': '#285E61 !important',
  'teal.800': '#234E52 !important',
  'teal.900': '#1D4044 !important',
  'blue.50': '#ebf8ff !important',
  'blue.100': '#bee3f8 !important',
  'blue.200': '#90cdf4 !important',
  'blue.300': '#63b3ed !important',
  'blue.400': '#4299e1 !important',
  'blue.500': '#3182ce !important',
  'blue.600': '#2b6cb0 !important',
  'blue.700': '#2c5282 !important',
  'blue.800': '#2a4365 !important',
  'blue.900': '#1A365D !important',
  'cyan.50': '#EDFDFD !important',
  'cyan.100': '#C4F1F9 !important',
  'cyan.200': '#9DECF9 !important',
  'cyan.300': '#76E4F7 !important',
  'cyan.400': '#0BC5EA !important',
  'cyan.500': '#00B5D8 !important',
  'cyan.600': '#00A3C4 !important',
  'cyan.700': '#0987A0 !important',
  'cyan.800': '#086F83 !important',
  'cyan.900': '#065666 !important',
  'purple.50': '#FAF5FF !important',
  'purple.100': '#E9D8FD !important',
  'purple.200': '#D6BCFA !important',
  'purple.300': '#B794F4 !important',
  'purple.400': '#9F7AEA !important',
  'purple.500': '#805AD5 !important',
  'purple.600': '#6B46C1 !important',
  'purple.700': '#553C9A !important',
  'purple.800': '#44337A !important',
  'purple.900': '#322659 !important',
  'pink.50': '#FFF5F7 !important',
  'pink.100': '#FED7E2 !important',
  'pink.200': '#FBB6CE !important',
  'pink.300': '#F687B3 !important',
  'pink.400': '#ED64A6 !important',
  'pink.500': '#D53F8C !important',
  'pink.600': '#B83280 !important',
  'pink.700': '#97266D !important',
  'pink.800': '#702459 !important',
  'pink.900': '#521B41 !important',
  'linkedin.50': '#E8F4F9 !important',
  'linkedin.100': '#CFEDFB !important',
  'linkedin.200': '#9BDAF3 !important',
  'linkedin.300': '#68C7EC !important',
  'linkedin.400': '#34B3E4 !important',
  'linkedin.500': '#00A0DC !important',
  'linkedin.600': '#008CC9 !important',
  'linkedin.700': '#0077B5 !important',
  'linkedin.800': '#005E93 !important',
  'linkedin.900': '#004471 !important',
  'facebook.50': '#E8F4F9 !important',
  'facebook.100': '#D9DEE9 !important',
  'facebook.200': '#B7C2DA !important',
  'facebook.300': '#6482C0 !important',
  'facebook.400': '#4267B2 !important',
  'facebook.500': '#385898 !important',
  'facebook.600': '#314E89 !important',
  'facebook.700': '#29487D !important',
  'facebook.800': '#223B67 !important',
  'facebook.900': '#1E355B !important',
  'messenger.50': '#D0E6FF !important',
  'messenger.100': '#B9DAFF !important',
  'messenger.200': '#A2CDFF !important',
  'messenger.300': '#7AB8FF !important',
  'messenger.400': '#2E90FF !important',
  'messenger.500': '#0078FF !important',
  'messenger.600': '#0063D1 !important',
  'messenger.700': '#0052AC !important',
  'messenger.800': '#003C7E !important',
  'messenger.900': '#002C5C !important',
  'whatsapp.50': '#dffeec !important',
  'whatsapp.100': '#b9f5d0 !important',
  'whatsapp.200': '#90edb3 !important',
  'whatsapp.300': '#65e495 !important',
  'whatsapp.400': '#3cdd78 !important',
  'whatsapp.500': '#22c35e !important',
  'whatsapp.600': '#179848 !important',
  'whatsapp.700': '#0c6c33 !important',
  'whatsapp.800': '#01421c !important',
  'whatsapp.900': '#001803 !important',
  'twitter.50': '#E5F4FD !important',
  'twitter.100': '#C8E9FB !important',
  'twitter.200': '#A8DCFA !important',
  'twitter.300': '#83CDF7 !important',
  'twitter.400': '#57BBF5 !important',
  'twitter.500': '#1DA1F2 !important',
  'twitter.600': '#1A94DA !important',
  'twitter.700': '#1681BF !important',
  'twitter.800': '#136B9E !important',
  'twitter.900': '#0D4D71 !important',
  'telegram.50': '#E3F2F9 !important',
  'telegram.100': '#C5E4F3 !important',
  'telegram.200': '#A2D4EC !important',
  'telegram.300': '#7AC1E4 !important',
  'telegram.400': '#47A9DA !important',
  'telegram.500': '#0088CC !important',
  'telegram.600': '#007AB8 !important',
  'telegram.700': '#006BA1 !important',
  'telegram.800': '#005885 !important',
  'telegram.900': '#003F5E !important',
} as const

// https://github.com/chakra-ui/chakra-ui/blob/05b19899b02e17b4ee16045c9e5065fa835f0159/packages/components/theme/src/foundations/typography.ts#L1-L64
const typography = {
  letterSpacings: {
    tighter: '-0.05em',
    tight: '-0.025em',
    normal: '0',
    wide: '0.025em',
    wider: '0.05em',
    widest: '0.1em',
  },

  lineHeights: {
    normal: 'normal',
    none: '1',
    shorter: '1.25',
    short: '1.375',
    base: '1.5',
    tall: '1.625',
    taller: '2',
    '3': '.75rem',
    '4': '1rem',
    '5': '1.25rem',
    '6': '1.5rem',
    '7': '1.75rem',
    '8': '2rem',
    '9': '2.25rem',
    '10': '2.5rem',
  },

  fontWeights: {
    hairline: '100',
    thin: '200',
    light: '300',
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
    extrabold: '800',
    black: '900',
  },

  fonts: {
    heading:
      '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
  },

  fontSizes: {
    '3xs': '0.45rem',
    '2xs': '0.625rem',
    xs: '0.75rem',
    sm: '0.875rem',
    md: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '4xl': '2.25rem',
    '5xl': '3rem',
    '6xl': '3.75rem',
    '7xl': '4.5rem',
    '8xl': '6rem',
    '9xl': '8rem',
  },
} as const

// https://github.com/chakra-ui/chakra-ui/blob/05b19899b02e17b4ee16045c9e5065fa835f0159/packages/components/theme/src/foundations/z-index.ts#L1-L15
const zIndices = {
  hide: '-1',
  auto: 'auto',
  base: '0',
  docked: '10',
  dropdown: '1000',
  sticky: '1100',
  banner: '1200',
  overlay: '1300',
  modal: '1400',
  popover: '1500',
  skipLink: '1600',
  toast: '1700',
  tooltip: '1800',
} as const

// https://github.com/chakra-ui/chakra-ui/blob/05b19899b02e17b4ee16045c9e5065fa835f0159/packages/components/theme/src/foundations/shadows.ts#L17
const shadows = {
  xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
  base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
  outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
  none: 'none',
  'dark-lg': 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px',
} as const

// https://github.com/chakra-ui/chakra-ui/blob/05b19899b02e17b4ee16045c9e5065fa835f0159/packages/components/theme/src/foundations/spacing.ts#L22
const space = {
  auto: 'auto',
  none: 'none',
  px: '1px',
  0: '0',
  0.5: '0.125rem',
  1: '0.25rem',
  1.5: '0.375rem',
  2: '0.5rem',
  2.5: '0.625rem',
  3: '0.75rem',
  3.5: '0.875rem',
  4: '1rem',
  5: '1.25rem',
  6: '1.5rem',
  7: '1.75rem',
  8: '2rem',
  9: '2.25rem',
  10: '2.5rem',
  12: '3rem',
  14: '3.5rem',
  16: '4rem',
  20: '5rem',
  24: '6rem',
  28: '7rem',
  32: '8rem',
  36: '9rem',
  40: '10rem',
  44: '11rem',
  48: '12rem',
  52: '13rem',
  56: '14rem',
  60: '15rem',
  64: '16rem',
  72: '18rem',
  80: '20rem',
  96: '24rem',
} as const

// https://github.com/chakra-ui/chakra-ui/blob/05b19899b02e17b4ee16045c9e5065fa835f0159/packages/components/theme/src/foundations/borders.ts#L1-L7
const borders = {
  none: '0',
  '1px': '1px',
  '2px': '2px',
  '4px': '4px',
  '8px': '8px',
} as const

// https://github.com/chakra-ui/chakra-ui/blob/05b19899b02e17b4ee16045c9e5065fa835f0159/packages/components/theme/src/foundations/radius.ts#L1-L12
const radii = {
  none: '0',
  sm: '0.125rem',
  base: '0.25rem',
  md: '0.375rem',
  lg: '0.5rem',
  xl: '0.75rem',
  '2xl': '1rem',
  '3xl': '1.5rem',
  full: '9999px',
} as const

// https://github.com/chakra-ui/chakra-ui/blob/05b19899b02e17b4ee16045c9e5065fa835f0159/packages/components/theme/src/foundations/sizes.ts#L3-L36
const largeSizes = {
  max: 'max-content',
  min: 'min-content',
  full: '100%',
  '3xs': '14rem',
  '2xs': '16rem',
  xs: '20rem',
  sm: '24rem',
  md: '28rem',
  lg: '32rem',
  xl: '36rem',
  '2xl': '42rem',
  '3xl': '48rem',
  '4xl': '56rem',
  '5xl': '64rem',
  '6xl': '72rem',
  '7xl': '80rem',
  '8xl': '90rem',
  prose: '60ch',
} as const

const container = {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
} as const

const percentsRecord = {
  auto: 'auto',
  '0%': '0%',
  '25%': '25%',
  '50%': '50%',
  '75%': '75%',
  '100%': '100%',
  '100vh': '100vh',
  '100vw': '100vw',
} as const

const positions = {
  auto: 'auto',
  '0': '0',
  '-50%': '-50%',
  '0%': '0%',
  '50%': '50%',
  '100%': '100%',
} as const

const aligns = {
  stretch: 'stretch',
  start: 'flex-start',
  center: 'center',
  end: 'flex-end',
  baseline: 'baseline',
  'space-around': 'space-around',
  'space-between': 'space-between',
  'space-evenly': 'space-evenly',
} as const

const sizes = {
  ...space,
  ...largeSizes,
  ...percentsRecord,
} as const

export const tokens = {
  colors: colorPalette,
  space,
  // breakpoints,
  container,
  borders,
  radii,
  sizes,
  typography,
  zIndices,
  shadows,
  positions,
  aligns,
} as const

/** azraqblue */
export const primary = {
  '50': '#cdd5ed',
  '100': '#a7b6df',
  '200': '#95a7d8',
  '300': '#8297d1',
  '400': '#6f88cb',
  '500': '#4a69bd',
  '600': '#39539b',
  '700': '#324989',
  '800': '#2b3f76',
  '900': '#1d2b51',
} as const

export const [lightClassName, lightThemeVars] = createTheme({
  // export const [lightClassName, lightThemeVars] = createTheme({
  color: {
    mainBg: primary['200'],
    secondaryBg: primary['300'],
    text: tokens.colors.blue['400'],
    bg: primary['600'],
    bgSecondary: primary['400'],
    bgHover: primary['100'],
  },
})

export const [darkClassName, darkThemeVars] = createTheme({
  color: {
    mainBg: primary['600'],
    secondaryBg: primary['700'],
    text: tokens.colors.blue['300'],
    bg: primary['300'],
    bgSecondary: primary['800'],
    bgHover: primary['700'],
  },
})
console.log({ lightThemeVars, darkClassName, darkThemeVars })

const flatPrimaryColors = {
  'brand.50': primary['50'],
  'brand.100': primary['100'],
  'brand.200': primary['200'],
  'brand.300': primary['300'],
  'brand.400': primary['400'],
  'brand.500': primary['500'],
  'brand.600': primary['600'],
  'brand.700': primary['700'],
  'brand.800': primary['800'],
  'brand.900': primary['900'],
}

const colors = { ...flatColors, ...lightThemeVars.color, ...flatPrimaryColors }

const screens = {
  mobile: { max: '599px' },
  tablet: { min: '600px', max: '1023px' },
  desktop: { min: '1024px' },
} as const
type TwResponsiveBreakpoints = keyof typeof screens
type TwResponsiveBreakpointsMap = Record<TwResponsiveBreakpoints, { min?: string; max?: string }>

const twBreakpointsToAppBreakpoints = (breakpointsMap: TwResponsiveBreakpointsMap) =>
  Object.fromEntries(
    Object.entries(breakpointsMap).map(([key, { min, max }]) => [
      key,
      {
        '@media': ['screen', min ? `(min-width: ${min})` : '', max ? `(max-width: ${max})` : '']
          .filter(Boolean)
          .join(' and '),
      },
    ]),
  ) as Record<TwResponsiveBreakpoints, ConfigConditions[string]>

export const css = defineProperties({
  conditions: {
    ...twBreakpointsToAppBreakpoints(screens),
    default: {},
    hover: { selector: '&:hover,&[data-hover]' },
    active: { selector: '&:active,&[data-active]' },
    focus: { selector: '&:focus,&[data-focus]' },
    highlighted: { selector: '&[data-highlighted]' },
    focusWithin: { selector: '&:focus-within' },
    focusVisible: { selector: '&:focus-visible' },
    disabled: {
      selector: '&[disabled],&[aria-disabled=true],&[data-disabled]',
    },
    readOnly: {
      selector: '&[aria-readonly=true],&[readonly],&[data-readonly]',
    },
    before: { selector: '&::before' },
    after: { selector: '&::after' },
    empty: { selector: '&:empty' },
    expanded: { selector: '&[aria-expanded=true]' },
    checked: { selector: '&[aria-checked=true],&[data-checked]' },
    grabbed: { selector: '&[aria-grabbed=true],&[data-grabbed]' },
    pressed: { selector: '&[aria-pressed=true],&[data-pressed]' },
    invalid: { selector: '&[aria-invalid=true],&[data-invalid]' },
    valid: { selector: '&[aria-invalid=false],&[data-valid]' },
    loading: { selector: '&[aria-busy=true],&[data-loading]' },
    selected: { selector: '&[aria-selected=true],&[data-selected]' },
    hidden: { selector: '&[aria-hidden=true],&[data-hidden]' },
    autofill: { selector: '&:-webkit-autofill' },
    even: { selector: '&:nth-of-type(even)' },
    odd: { selector: '&:nth-of-type(odd)' },
    first: { selector: '&:first-of-type' },
    last: { selector: '&:last-of-type' },
    notFirst: { selector: '&:not(:first-of-type)' },
    notLast: { selector: '&:not(:last-of-type)' },
    visited: { selector: '&:visited' },
    activeLink: { selector: '&[aria-current=page]' },
    activeStep: { selector: '&[aria-current=step]' },
    indeterminate: {
      selector: '&:indeterminate,&[aria-checked=mixed],&[data-indeterminate]',
    },
    groupHover: {
      selector:
        '[role=group]:hover &,[role=group][data-hover] &,[data-group]:hover &,[data-group][data-hover] &,.group:hover &,.group[data-hover] &',
    },
    peerHover: {
      selector: '[data-peer]:hover ~ &, [data-peer][data-hover] ~ &, .peer:hover ~ &, .peer[data-hover] ~ &',
    },
    groupFocus: {
      selector:
        '[role=group]:focus &,[role=group][data-focus] &,[data-group]:focus &,[data-group][data-focus] &,.group:focus &,.group[data-focus] &',
    },
    peerFocus: {
      selector: '[data-peer]:focus ~ &, [data-peer][data-focus] ~ &, .peer:focus ~ &, .peer[data-focus] ~ &',
    },
    groupFocusVisible: {
      selector: '&[role=group]:focus-visible[data-group]:focus-visible.group:focus-visible',
    },
    peerFocusVisible: {
      selector: '[data-peer]:focus-visible ~ &, .peer:focus-visible ~ &',
    },
    groupActive: {
      selector:
        '[role=group]:active &,[role=group][data-active] &,[data-group]:active &,[data-group][data-active] &,.group:active &,.group[data-active] &',
    },
    peerActive: {
      selector: '[data-peer]:active ~ &, [data-peer][data-active] ~ &, .peer:active ~ &, .peer[data-active] ~ &',
    },
    groupDisabled: {
      selector:
        '[role=group]:disabled &,[role=group][data-disabled] &,[data-group]:disabled &,[data-group][data-disabled] &,.group:disabled &,.group[data-disabled] &',
    },
    peerDisabled: {
      selector: '&[data-peer]:disabled ~ &,[data-peer][data-disabled] ~ &,.peer:disabled ~ &,.peer[data-disabled] ~ &',
    },
    groupInvalid: {
      selector:
        '[role=group]:invalid &,[role=group][data-invalid] &,[data-group]:invalid &,[data-group][data-invalid] &,.group:invalid &,.group[data-invalid] &',
    },
    peerInvalid: {
      selector: '&[data-peer]:invalid ~ &,[data-peer][data-invalid] ~ &,.peer:invalid ~ &,.peer[data-invalid] ~ &',
    },
    groupChecked: {
      selector:
        '[role=group]:checked &,[role=group][data-checked] &,[data-group]:checked &,[data-group][data-checked] &,.group:checked &,.group[data-checked] &',
    },
    peerChecked: {
      selector: '&[data-peer]:checked ~ &,[data-peer][data-checked] ~ &,.peer:checked ~ &,.peer[data-checked] ~ &',
    },
    groupFocusWithin: {
      selector: '&[role=group]:focus-within &, [data-group]:focus-within &, .group:focus-within &',
    },
    peerFocusWithin: {
      selector: '&[data-peer]:focus-within ~ &,.peer:focus-within ~ &',
    },
    peerPlaceholderShown: {
      selector: '&[data-peer]::placeholder-shown ~ &,.peer::placeholder-shown ~ &',
    },
    _placeholder: { selector: '&::placeholder' },
    placeholderShown: { selector: '&::placeholder-shown' },
    fullScreen: { selector: '&:fullscreen' },
    selection: { selector: '&::selection' },
    rtl: { selector: '&[dir=rtl] &,&[dir=rtl]' },
    ltr: { selector: '&[dir=ltr] &,&[dir=ltr]' },
    mediaDark: { '@media': '(prefers-color-scheme: dark)' },
    mediaReduceMotion: { '@media': '(prefers-reduced-motion: reduce)' },
    dark: { selector: '&[data-theme=dark] &,&[data-theme=dark]' },
    light: { selector: '&[data-theme=light] &,&[data-theme=light]' },
    resizeHandleActive: { selector: '[data-resize-handle-active] &' },
    panelHorizontalActive: { selector: '[data-panel-group-direction="horizontal"] &' },
    panelVerticalActive: { selector: '[data-panel-group-direction="vertical"] &' },
  },
  properties: {
    boxShadow: tokens.shadows,
    textShadow: tokens.shadows,
    opacity: {
      '0': '0',
      '0.4': '0.6',
      '0.6': '0.6',
      '1': '1',
    },
    cursor: true,
    pointerEvents: true,
    userSelect: true,
    //
    fontFamily: tokens.typography.fonts,
    fontSize: tokens.typography.fontSizes,
    fontWeight: tokens.typography.fontWeights,
    lineHeight: tokens.typography.lineHeights,
    letterSpacing: tokens.typography.letterSpacings,
    textAlign: true,
    fontStyle: true,
    textTransform: true,
    textDecoration: true,
    //
    position: true,
    display: true,
    flexDirection: true,
    flexShrink: true,
    flexGrow: true,
    flex: true,
    flexWrap: true,
    justifyContent: true,
    justifySelf: true,
    alignItems: true,
    alignSelf: true,
    top: sizes,
    bottom: sizes,
    left: sizes,
    right: sizes,
    inset: sizes,
    // base props
    width: sizes,
    minWidth: sizes,
    maxWidth: sizes,
    height: sizes,
    minHeight: sizes,
    maxHeight: sizes,
    whiteSpace: true,
    textOverflow: true,
    overflow: true,
    overflowX: true,
    overflowY: true,
    visibility: true,
    verticalAlign: true,
    // spacing props
    // TODO negative values
    // https://github.com/vanilla-extract-css/vanilla-extract/blob/master/site/src/system/styles/sprinkles.css.ts
    gap: space,
    rowGap: space,
    columnGap: space,
    padding: space,
    paddingTop: space,
    paddingBottom: space,
    paddingLeft: space,
    paddingRight: space,
    paddingInlineStart: space,
    paddingInlineEnd: space,
    margin: space,
    marginTop: space,
    marginBottom: space,
    marginLeft: space,
    marginRight: space,
    marginInlineStart: space,
    marginInlineEnd: space,
    border: tokens.borders,
    borderStyle: true,
    borderWidth: tokens.borders,
    borderTopWidth: tokens.borders,
    borderRightWidth: tokens.borders,
    borderBottomWidth: tokens.borders,
    borderLeftWidth: tokens.borders,
    borderTop: tokens.borders,
    borderBottom: tokens.borders,
    borderLeft: tokens.borders,
    borderRight: tokens.borders,
    borderRadius: tokens.radii,
    borderTopLeftRadius: tokens.radii,
    borderTopRightRadius: tokens.radii,
    borderBottomLeftRadius: tokens.radii,
    borderBottomRightRadius: tokens.radii,
    outline: tokens.borders,
    // colors props
    color: colors,
    background: colors,
    backgroundColor: colors,
    borderColor: colors,
    borderTopColor: colors,
    borderBottomColor: colors,
    borderLeftColor: colors,
    borderRightColor: colors,
    outlineColor: colors,
    fill: colors,
    stroke: colors,
    // transform props
    transform: true,
    transformOrigin: true,
    // static properties
    zIndex: tokens.zIndices,
    transition: {
      none: 'none',
      slow: 'all .3s ease, opacity .3s ease',
      fast: 'all .15s ease, opacity .15s ease',
    },
    backgroundSize: true,
    backgroundRepeat: true,
    backgroundPosition: true,
    backgroundAttachment: true,
    wordBreak: true,
    objectFit: true,
    objectPosition: true,
    listStyleType: true,
  },
  shorthands: {
    // base props
    d: ['display'],
    pos: ['position'],
    t: ['top'],
    b: ['bottom'],
    l: ['left'],
    r: ['right'],
    boxSize: ['width', 'height'],
    w: ['width'],
    h: ['height'],
    minW: ['minWidth'],
    maxW: ['maxWidth'],
    minH: ['minHeight'],
    maxH: ['maxHeight'],
    placeItems: ['justifyContent', 'alignItems'],
    ta: ['textAlign'],
    tt: ['textTransform'],
    fs: ['fontSize'],
    fw: ['fontWeight'],
    // spacing props
    m: ['margin'],
    mt: ['marginTop'],
    mr: ['marginRight'],
    mb: ['marginBottom'],
    ml: ['marginLeft'],
    mx: ['marginLeft', 'marginRight'],
    my: ['marginTop', 'marginBottom'],
    ms: ['marginInlineStart'],
    me: ['marginInlineEnd'],
    p: ['padding'],
    marginX: ['marginLeft', 'marginRight'],
    marginY: ['marginTop', 'marginBottom'],
    pt: ['paddingTop'],
    pr: ['paddingRight'],
    pb: ['paddingBottom'],
    pl: ['paddingLeft'],
    px: ['paddingLeft', 'paddingRight'],
    paddingX: ['paddingLeft', 'paddingRight'],
    paddingY: ['paddingTop', 'paddingBottom'],
    ps: ['paddingInlineStart'],
    pe: ['paddingInlineEnd'],
    py: ['paddingTop', 'paddingBottom'],
    bw: ['borderWidth'],
    bx: ['borderLeft', 'borderRight'],
    borderX: ['borderLeft', 'borderRight'],
    by: ['borderTop', 'borderBottom'],
    borderY: ['borderTop', 'borderBottom'],
    // colors props
    bg: ['background'],
    bgColor: ['backgroundColor'],
    borderXColor: ['borderLeftColor', 'borderRightColor'],
  },
})
